<template>
  <div class="user">
    <van-nav-bar
      title="个人中心"
      left-text="上一页"
      right-text="退出登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <div class="content">
      <van-image
        round
        width="10rem"
        height="10rem"
        :src="list.avatar | imgUrl"
      />
      <span>用户名:{{ list.userName }} </span>
      <span>昵称:{{ list.nickName ? list.nickName : "暂无" }} </span>
      <van-button
        round
        type="info"
        size="large"
        style="width:80vw"
        @click="toModiInfo"
        >修改个人信息</van-button
      >
      <van-button
        round
        type="info"
        size="large"
        style="width:80vw"
        @click="toModiPwd"
        >修改密码</van-button
      >
      <van-button
        round
        type="info"
        size="large"
        style="width:80vw"
        @click="toMyOrder"
        >我的订单</van-button
      >
    </div>
  </div>
</template>

<script>
import { removeToken } from "../utils/tools";
import { get } from "../utils/request";
export default {
  data() {
    return {
      list: {},
    };
  },
  created() {
    get("/api/v1/user/info").then((res) => {
      if (res.code === 1) {
        this.list = { ...res.data };
      } else {
        alert("服务器异常！");
      }
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 退出登录
    onClickRight() {
      removeToken();
      this.$router.replace({
        name: "Login",
      });
    },
    toModiInfo() {
      this.$router.push({
        name: "ModiInfo",
      });
    },
    toModiPwd() {
      this.$router.push({
        name: "ModiPwd",
      });
    },
    toMyOrder() {
      this.$router.push({
        name: "Order",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 70vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
</style>
